<template>
	<div id="mine" class="mine">
		<group class="mineCellGroup">
			<cell class="mineCell" :title="settings" @click.native="onClickSettings('settings')">
				<img slot="icon" class="mine_icon" src="../../../module/mavinTeacher/assets/svg/icon_settings.svg">
			</cell>
		</group>

		<group class="mineCellGroup">
			<cell class="mineCell" :title="password" @click.native="onClickChgPwd('password')">
				<img slot="icon" class="mine_icon" src="../../../module/mavinTeacher/assets/svg/icon_password.svg">
			</cell>
		</group>

		<group class="mineCellGroup">
			<cell class="mineCell" :title="changeRole" @click.native="onClick('change')">
				<img slot="icon" class="mine_icon" src="@/assets/svg/icon_change.svg">
			</cell>
		</group>

		<group class="mineCellGroup">
			<cell class="mineCell" :title="bindWeChatOpenId" :value="bindStatusMsg" @click.native="bindWeChat">
				<img slot="icon" class="mine_icon" src="@/assets/svg/icon_wechat.svg">
			</cell>
		</group>

		<group class="mineCellGroup">
			<cell class="mineCell" :title="logout" @click.native="onClick('logout')">
				<img slot="icon" class="mine_icon" src="../../../module/mavinTeacher/assets/svg/icon_logout.svg">
			</cell>
		</group>

		<div v-transfer-dom>
			<confirm v-model="show"
			         :title="title"
			         @on-cancel="onCancel"
			         @on-confirm="onConfirm"
			         @on-show="onShow"
			         @on-hide="onHide">
				<p style="text-align:center;">{{ message }}</p>
			</confirm>
		</div>

		<actionsheet
			class="loginActionSheet"
			v-model="showRole"
			:menus="menu"
			theme="android"
			@on-click-menu="click"
			@on-after-hide="log('after hide')"
			@on-after-show="log('after show')">
			<p slot="header" v-html="actionHeader"></p>
		</actionsheet>

		<div v-transfer-dom>
			<confirm v-model="bindShow"
			         :title="bindTitle"
			         @on-cancel="bindCancel"
			         @on-confirm="bindConfirm"
			         @on-show="onShow"
			         @on-hide="onHide">
				<p style="text-align:center;">{{ bindMessage }}</p>
			</confirm>
		</div>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../utils/networking'
	import {Confirm, Divider, Card, Cell, Group, TransferDomDirective as TransferDom, Actionsheet} from 'vux'
	export default {
		name: "self-manage",
		components: {
			Confirm,
			Divider,
			Card,
			Cell,
			Group,
			Actionsheet
		},
		directives: {
			TransferDom
		},
		created: function () {
			bus.$emit("barController", 1)
			bus.$emit("userDefinedEvent", 4)
			bus.$emit("setTopSimpleTitle", '个人设置')

			if(navigator.userAgent.match('MicroMessenger')){
				this.isWechat = true
			}

			if(this.$store.state.user.userModel.sysUser.wx_open_id != null){
				this.bindStatus = true
				this.bindStatusMsg = '已绑定'
			}
		},
		data() {
			return {
				isWechat: false,
				actionHeader: '选择想要切换的角色',
				changeRole: '切换角色',
				bindWeChatOpenId: '绑定服务号',
				bindStatus: false,
				bindStatusMsg: '未绑定',
				bindShow: false,
				bindTitle: '操作提示',
				bindMessage: '',
				show: false,
				showRole: false,
				menu: {},
				title: '操作提示',
				message: '确定要退出吗？',
				settings: '个人信息',
				password: '密码修改',
				logout: '退出'
			}
		},
		methods: {
			bindCancel() {

			},
			bindConfirm() {
				if(!this.bindStatus){
					window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx60f5ca4182fe5223&redirect_uri=http://www.edumavin.com/api/wechat/page/oauth2&response_type=code&scope=snsapi_base&state=http://www.edumavin.com/proxy#wechat_redirect"
				}else{
					this.unbind()
				}
			},
			unbind () {
				let _this = this
				NetWorking.doPost(
					'auth/unbindWxOpenId',
					null,
					null,
					null
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.$store.commit('FETCH_USER_MODEL')
							let userModel = _this.$store.state.user.userModel
							userModel.sysUser.wx_open_id = ''
							_this.$store.commit('CREATE_USER_MODEL', userModel)
							_this.bindStatusMsg = '未绑定'
							_this.bindStatus = false
						}else{
							alert(rs.error_message)
						}
					}
				)
			},
			onCancel () {
				console.log('on cancel')
			},
			onConfirm (msg) {
				this.logoutNow()
			},
			onHide () {
				console.log('on hide')
			},
			onShow () {
				console.log('on show')
			},
			onClick: function(value) {
				switch(value){
					case 'logout':
						this.show = true
						break
					case 'change':
						this.change()
						break
					default:
						break
				}
			},
			logoutNow() {
				this.$store.dispatch('deleteToken')
				this.$store.dispatch('deleteUserModel')
				this.$store.dispatch('deletePendingActNum')
				this.$store.dispatch('deleteUrlParams')
				this.$store.dispatch('deletelastLoginAs')
				location.replace('/login')
			},
			onClickSettings() {
				this.$router.push({ name: "selfUpdate"})
			},
			onClickChgPwd() {
				this.$router.push({ name: "selfPwdChange"})
			},
			click (key, item) {
				switch (key) {
					case 'teacher':
						this.$store.commit('CREATE_LAST_LOGIN_AS', 'teacher')
						this.$store.commit('DELETE_URL_PARAMS')
						location.replace('/mavinTeacher')
						break
					case 'consultant':
						this.$store.commit('CREATE_LAST_LOGIN_AS', 'consultant')
						this.$store.commit('DELETE_URL_PARAMS')
						location.replace('/mavinSales')
						break
				}
			},
			bindWeChat () {
				this.bindShow = true
				if(!this.bindStatus){
					this.bindMessage = '绑定微信通知会更好的安排工作'
				}else{
					this.bindMessage = '确定要解绑吗？你将不再收到微信通知'
				}
			},
			change() {
				let items = this.$store.state.user.userModel.sysRoleList

				for(let i=0; i<items.length; i++){
					switch (items[i].role_name) {
						case 'teacher':
							this.menu.teacher = '切换至老师身份'
							break
						case 'consultant':
							this.menu.consultant = '切换至销售身份'
							break
						default:
							break
					}
				}

				this.showRole = true
			}
		}
	}
</script>

<style lang="less">
	@import '../../../../node_modules/vux/src/styles/1px.less';

	.card-demo-flex {
		display: flex;
	}
	.card-demo-content01 {
		padding: 10px 0;
	}
	.card-padding {
		padding: 15px;
	}
	.card-demo-flex > div {
		flex: 1;
		text-align: center;
		font-size: 12px;
	}
	.card-demo-flex span {
		color: #f74c31;
	}

	.mine{
		background: #8080800d;
		margin-top: 46px;
		margin-bottom: 100px;
	}

	.mineCell{
		padding: 0 0 !important;
	}

	.mineCell > .weui-cell__ft {
		color: orange;
		font-size: 13px;
		margin-right: 10px;
	}

	.mine_icon {
		width: 20px;
		display: block;
		margin-right: 25px;
		margin-left: 10px;
	}

	.mineCellGroup {
		border-radius: 0px !important;
	}

</style>
